<template>
	<view class="planting_records_container">
		<view v-for="(item, index) in recordsList" :key="item.id" class="records_item">
			<view class="top">
				<view class="status">
					<view class="left">
						<view class="user">用户</view>
						<view class="mark_status">
							<text class="label">笔记状态：</text>
							<text class="value">已发布</text>
						</view>
					</view>
					<view class="right">
						<view :class="[
							   { 'tag': true },
							   { 'auditing': item.status === '0' },
							   { 'passed': item.status === '1' },
							   { 'unpassed': item.status === '2' }
							 ]">{{getStatus(item.status)}}</view>
					</view>
				</view>
				<view class="time">
					<view class="left">
						<view class="sub_time">
							<text class="label">提交时间：</text>
							<text class="value">{{item.create_time}}</text>
						</view>
						<view class="shenhe_time">
							<text class="label">审核时间：</text>
							<text class="value">{{item.audit_time || '--'}}</text>
						</view>
					</view>
					<view class="right">
						<view class="price">{{item.status !== '2' ? '¥3.0' : '¥0'}}</view>
					</view>
				</view>
			</view>
			<view class="content">{{item.url}}</view>
			<view class="unpassed_reason" v-if="item.status == '2'">
				<text class="reason_label">驳回原因：</text>
				<text class="reason_value">{{item.reason}}</text>
			</view>
		</view>
		<view class="no_data" v-if="!recordsList.length">
			<image src="https://dy.sykj365.com/uploads/mini/zanwu@2x.png" mode="widthFix"></image>
			<text>暂无数据~</text>
		</view>		
	</view>

</template>

<script>
	export default{
		data(){
			return {
				recordsList: []
			}
		},
		onLoad(){
			this.getRecordsList();
		},
		methods: {
			getRecordsList(){
				this.$http.get(this.$api.shareList).then(res => {
					if(res.code === 20000){
						this.recordsList = res.data;
					}
				})
			},
			getStatus(val) {
				switch(val){
					case '0':
					  return '审核中'
					case '1':
					  return '已同意'
					case '2':
					  return '已驳回'
					default:
					  return ''
				}
			},
		}
	}
</script>

<style lang="less">
	.planting_records_container {
		height: 100vh;
		padding: 40rpx;
		background-color: #F4F5FA;
		.records_item {
			padding: 50rpx 28rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196,203,214,0.1);
			border-radius: 10rpx;
			margin-bottom: 60rpx;
			.left {
				float: left;
			}
			.right {
				float: right;
				padding-top: 18rpx;
			}
			.top {
				padding: 0rpx 0rpx 0rpx 24rpx;
				.status {
					overflow: hidden;
					.user {
						font-weight: bold;
						font-size: 30rpx;
						color: #0A1629;
						line-height: 48rpx;
					}
					.mark_status {
						font-weight: 500;
						font-size: 24rpx;
						.label {
							color: #91929E;
							line-height: 48rpx;
						}
						.value {
							color: #333;
							line-height: 48rpx;
						}
					}
					.tag {
						padding: 18rpx 24rpx;						
						border-radius: 16rpx;
						font-size: 24rpx;						
					}
					.tag.auditing {
						color: #00D097;
						background: #E0F9F2;
					}
					.tag.passed {
						color: #00D097;
						background: #E0F9F2;
					}
					.tag.unpassed {
						color: #0547E8;
						background: #E3EFFF;
					}
				}
				.time {
					overflow: hidden;
					padding: 24rpx 0 18rpx 0;
					.left {
						font-weight: 500;
						font-size: 24rpx;
						.label {
							color: #91929E;
							line-height: 52rpx;
						}
						.value {
							color: #0A1629;
							line-height: 52rpx;
						}
					}
					.right {
						padding: 0 24rpx 0  0;
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 34rpx;						
						line-height: 104rpx;
						.price {
							color: #FF6314;
						}
					}
				}
			}
			.content {
				background: #EEEEEE;
				box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196,203,214,0.1);font-family: Source Han Sans SC;
				font-size: 18rpx;
				color: #666666;
				line-height: 32rpx;
				padding: 30rpx 32rpx;
			}
			.unpassed_reason {
				padding: 24rpx 20rpx;
				font-size: 24rpx;
				.reason_label {
					color: #91929E;
					line-height: 52rpx;
				}
				.reason_value {
					color: #0A1629;
					line-height: 52rpx;
				}
			}
		}
	}
	.no_data {
		text-align: center;
		color: #B2B2B2;
		font-size: 28rpx;
		image {
			width: 192rpx;
			height: 176rpx;
			margin: 168rpx auto 48rpx;
		}
	}
</style>